<template>
    <view class="container" :style="themeColor">
        <tab-bar-activity :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar-activity>
        <view class="main">
            <swiper v-if="loadOk" :style="{ height: listHeight }" :current="tabIndex" @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in tabs" :key="swiperIndex">
                    <activity-list
                        :data="swiperItem"
                        :height="listHeight"
                        :tabType="tabIndex"
                        v-if="tabIndex != 2"></activity-list>
                    <coupon-list :height="listHeight" :tabType="tabIndex" v-if="tabIndex == 2"></coupon-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import tabBarActivity from "@/pages_me/components/activity/tab-bar-activity.vue"
import activityList from "@/pages_me/components/activity/activity-list.vue"
import couponList from "@/pages_me/components/activity/coupon-list.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"

export default {
    components: {
        tabBarActivity,
        activityList,
        couponList,
    },
    data() {
        return {
            tabs: [
                {
                    title: "营销活动",
                    type: 0,
                },
                {
                    title: "大转盘",
                    type: 1,
                },
                {
                    title: "优惠券",
                    type: 2,
                },
            ],
            tabIndex: 0,
            listHeight: 0,
            loadOk: false,
        }
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    background: white;
    border-top: 1rpx solid #f7f7f7;
}
.btn {
    margin-left: 0;
    border-radius: 100rpx;
    height: 90rpx;
}
</style>
